<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />

		<style type="text/css">
			.right-arrow {
				line-height: 42px;
				color: lightgray;
				margin-left: 3px;
			}

			.system-font {
				line-height: 42px;
				font: 16px;
			}

			.system-font {
				line-height: 42px;
				font-size: 16px;
			}

			.user-font {
				line-height: 42px;
				font-size: 14px;
				color: gray;
			}

			#qr-code-img {
				max-width: 20px;
				height: 20px;
				margin-top: 11px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" id="link-face">
					<a href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright right-arrow"></span>
						<img id="face-image" class="mui-media-object mui-pull-right" src="image/default-face.png">
						<div class="mui-media-body system-font">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="nick-name">
					<a href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright right-arrow"></span>
						<span id="nick-name-span" class="mui-pull-right user-font"></span>
						<div class="mui-media-body system-font">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-right" src="">
						<span id="user-name" class="mui-pull-right user-font"></span>
						<div class="mui-media-body system-font">
							账号
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="qr-code">
					<a href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright right-arrow"></span>
						<img id="qr-code-img" class="mui-media-object mui-pull-right" src="image/qrcode.png">
						<div class="mui-media-body system-font">
							二维码
						</div>
					</a>
				</li>
			</ul>

			<br>

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="logout" href="javascript:;">
						<div class="mui-media-body system-font">
							退出登陆
						</div>
					</a>
				</li>
			</ul>
		</div>

		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {

				// init user info
				var currentWebview = plus.webview.currentWebview();
				currentWebview.addEventListener("show", function() {
					refreshUserInfo();
				});


				// goto face html
				var linkFace = document.getElementById('link-face');
				linkFace.addEventListener('tap', function() {
					mui.openWindow('myface.html', 'myface.html');
				});

				// goto mynickname html
				var nickName = document.getElementById('nick-name');
				nickName.addEventListener('tap', function() {
					mui.openWindow('mynickname.html', 'mynickname.html');
				});

				// goto qrcode html
				var link_my_qrcode = document.getElementById("qr-code");
				link_my_qrcode.addEventListener("tap", function() {
					mui.openWindow({
						url: "myQRCode.html",
						id: "myQRCode.html",
						styles: {}
					})
				});

				// user logout
				var logout = document.getElementById('logout');
				logout.addEventListener('tap', function() {
					app.userLogout();
					mui.openWindow('login.html', 'login.html');
				});
				
				// 添加自定义事件，刷新头像
				window.addEventListener("refresh", function(){
					refreshUserInfo();
				});
			});
			
			// init user info
			function refreshUserInfo() {
				var user = app.getUserGlobalInfo();

				if (user) {
					var faceImage = user.faceImage;
					var nickName = user.nickname;
					var userName = user.username;

					var nickNameEle = document.getElementById('nick-name-span');
					var userNameEle = document.getElementById('user-name');

					nickNameEle.innerHTML = nickName;
					userNameEle.innerHTML = userName;

					if (app.isNotNull(faceImage)) {
						var faceImageEle = document.getElementById('face-image');
						faceImageEle.src = app.imgServerUrl + faceImage;
					}
				}
			}
		</script>
	</body>

</html>
